import React from "react";
import {CircularProgress, Grid, Typography} from "@material-ui/core";
import Preview from "./Preview/Preview";
import {useDispatch, useSelector} from "react-redux";
import Button from "@material-ui/core/Button";
import SaveIcon from "@material-ui/icons/Save";
import makeStyles from "@material-ui/core/styles/makeStyles";
import {indicatorSaved, resetIndicatorSession} from "../../../../../../redux/reducers/editor";
import {addNewIndicator, discardNewIndicatorRequest} from "../../../../../../redux/reducers/gqiEditor";
import {queryToIndicatorResponseWrapper} from "../../../../../../ruleEngine/rulesGenerator";
import {useHistory} from "react-router-dom";

const useStyles = makeStyles(theme => ({
  buttonSpacing: {
    marginRight: theme.spacing(1)
  },
  gutterBottom: {
    marginBottom: theme.spacing(2)
  },
}));

export default function VisualizationPreview({classes, handleStepBackward}) {
  const dispatch = useDispatch();
  const styles = useStyles();
  const history = useHistory();

  const displayCodeData = useSelector(state => state.editor.fetchedData.visualizationCode.displayCode);
  const indicatorName = useSelector(state => state.editor.selectedData.indicatorName.name);
  const indicatorType = useSelector((state) => state.gqiEditor.common.indicatorType);
  const indicatorNameAvailable = useSelector(state => state.editor.selectedData.indicatorName.available);
  const scriptCodeData = useSelector(state => state.editor.fetchedData.visualizationCode.scriptCode);
  const indicatorPreviewData = useSelector(state => state.editor.selectedData.indicatorPreview);
  const errorMessage = useSelector(state => state.editor.fetchedData.visualizationCode.errorMessage);
  const indicatorNameConfirmed = useSelector(state => state.editor.selectedData.indicatorName.confirmed);


  const handleSaveVisualization = () => {
    dispatch(indicatorSaved());
    dispatch(addNewIndicator(queryToIndicatorResponseWrapper(indicatorPreviewData, indicatorType, indicatorName)));
    dispatch(discardNewIndicatorRequest());
    dispatch(resetIndicatorSession())
    history.push('/editor');
  }


  return (
    <Grid container direction="column" md={9} lg={8} >
      {displayCodeData ? (
        <Grid item className={classes.gutterTopBottom}>
          <Preview
            indicatorType={indicatorType}
            indicatorName={indicatorName}
            indicatorNameAvailable={indicatorNameAvailable}
            displayCodeData={displayCodeData}
            scriptCodeData={scriptCodeData}
            indicatorPreviewData={indicatorPreviewData}
            classes={classes}/>
        </Grid>
      ) : (errorMessage ? (
        <Grid container direction="column" alignItems="center"
              className={classes.gutterTopBottomLarge}>
          <Grid container alignItems="center">
            <Grid item>
              <Typography color="secondary"><b>{errorMessage}</b></Typography>
              <Typography color="secondary"><b>Possible Solution:</b></Typography>
              <Typography color="secondary">
                <li>Change the <b>Timeframe</b> in Filters</li>
              </Typography>
              {/*<Typography>*/}
              {/*  <li>Change the type of <b>users</b></li>*/}
              {/*</Typography>*/}
            </Grid>
          </Grid>
        </Grid>
      ) : (
        <Grid container direction="column" alignItems="center">
          <CircularProgress className={classes.gutterTopBottom}/>
          <Typography variant="overline">Loading Visualization</Typography>
        </Grid>
      ))}

      <Grid container >

        <Button onClick={handleStepBackward} className={styles.buttonSpacing} aria-label="Back">
          Back
        </Button>

        <Button
          disabled={errorMessage || indicatorNameConfirmed && !indicatorNameAvailable ||
            !indicatorNameConfirmed && !indicatorNameAvailable || !indicatorNameConfirmed && indicatorNameAvailable}
            onClick={handleSaveVisualization}
            color="primary" variant="contained"
            startIcon={<SaveIcon/>}>
            Save & Exit
          </Button>

      </Grid>


    </Grid>
  );
}
